// pages/modal-test/modal-test.ts
Page({
  data: {
    showModal: false,
    modalTitle: '',
    modalContent: '',
    showFooter: false,
    showCancel: true,
    showConfirm: true,
    cancelText: '取消',
    confirmText: '确定'
  },

  onLoad() {
    console.log('弹框组件测试页面加载');
  },

  // 显示简单文本弹框
  showSimpleModal() {
    this.setData({
      showModal: true,
      modalTitle: '商品描述',
      modalContent: `
        <div class="item-detail-simple">
          <div class="item-description-content">
            <p>这是一个简单的商品描述，用于展示基本的商品信息。</p>
            <p>商品特点：</p>
            <ul>
              <li>品质优良</li>
              <li>价格实惠</li>
              <li>值得购买</li>
            </ul>
          </div>
        </div>
      `,
      showFooter: false
    });
  },

  // 显示HTML内容弹框
  showHtmlModal() {
    const htmlContent = `
      <div class="item-detail-simple">
        <div class="item-description-content">
          <p>这是一件<strong>稀有装备</strong>，具有<em>特殊属性</em>，非常适合<code>高级玩家</code>使用。</p>
          <p>该装备具有以下特点：</p>
          <ul>
            <li>攻击力：+150</li>
            <li>暴击率：+25%</li>
            <li>特殊技能：魔法强化</li>
          </ul>
          <p>使用此装备可以大幅提升角色的战斗能力，是PVP和PVE的绝佳选择。</p>
        </div>
      </div>
    `;

    this.setData({
      showModal: true,
      modalTitle: '稀有装备 - 魔法长剑',
      modalContent: htmlContent,
      showFooter: false
    });
  },

  // 显示确认对话框
  showConfirmModal() {
    this.setData({
      showModal: true,
      modalTitle: '确认操作',
      modalContent: '确定要执行此操作吗？此操作不可撤销。',
      showFooter: true,
      showCancel: true,
      showConfirm: true,
      cancelText: '取消',
      confirmText: '确定执行'
    });
  },

  // 显示错误信息弹框
  showErrorModal() {
    this.setData({
      showModal: true,
      modalTitle: '操作失败',
      modalContent: '网络连接异常，请检查网络设置后重试。如果问题持续存在，请联系客服。',
      showFooter: false
    });
  },

  // 显示长内容弹框
  showLongContentModal() {
    const longContent = `
      <h3>长内容测试</h3>
      <p>这是一个包含大量内容的弹框，用于测试滚动功能。</p>
      
      <h4>第一章：介绍</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <h4>第二章：详细说明</h4>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      
      <h4>第三章：总结</h4>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      
      <h4>第四章：注意事项</h4>
      <ul>
        <li>第一条注意事项</li>
        <li>第二条注意事项</li>
        <li>第三条注意事项</li>
        <li>第四条注意事项</li>
        <li>第五条注意事项</li>
      </ul>
      
      <h4>第五章：联系方式</h4>
      <p>如果您有任何问题，请通过以下方式联系我们：</p>
      <ul>
        <li>邮箱：support@example.com</li>
        <li>电话：400-123-4567</li>
        <li>在线客服：工作日 9:00-18:00</li>
      </ul>
    `;

    this.setData({
      showModal: true,
      modalTitle: '长内容展示',
      modalContent: longContent,
      showFooter: false
    });
  },

  // 显示格式化内容弹框
  showFormattedModal() {
    const formattedContent = `
      <h3>格式化内容展示</h3>
      <p>这个弹框展示了各种HTML格式化的效果：</p>
      
      <h4>文本格式</h4>
      <p>普通文本、<strong>粗体文本</strong>、<em>斜体文本</em>、<code>代码文本</code></p>
      
      <h4>列表展示</h4>
      <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
      </ol>
      
      <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
      </ul>
      
      <h4>引用和链接</h4>
      <blockquote>
        这是一个引用块，用于突出显示重要信息或引用他人的话。
      </blockquote>
      
      <p>这是一个<a href="#">链接示例</a>，点击可以跳转到相关页面。</p>
      
      <h4>代码示例</h4>
      <p>这是一个<code>行内代码</code>的示例。</p>
    `;

    this.setData({
      showModal: true,
      modalTitle: '格式化内容',
      modalContent: formattedContent,
      showFooter: false
    });
  },

  // 显示自定义按钮弹框
  showCustomButtonsModal() {
    this.setData({
      showModal: true,
      modalTitle: '自定义按钮',
      modalContent: '这个弹框展示了自定义按钮文本的功能。',
      showFooter: true,
      showCancel: true,
      showConfirm: true,
      cancelText: '稍后再说',
      confirmText: '立即执行'
    });
  },

  // 关闭弹框
  onModalClose() {
    this.setData({
      showModal: false
    });
    console.log('弹框已关闭');
  },

  // 取消按钮事件
  onModalCancel() {
    this.setData({
      showModal: false
    });
    wx.showToast({
      title: '已取消操作',
      icon: 'none'
    });
  },

  // 确认按钮事件
  onModalConfirm() {
    this.setData({
      showModal: false
    });
    wx.showToast({
      title: '操作已确认',
      icon: 'success'
    });
  }
}); 